﻿﻿<!DOCTYPE html>
<html lang="zxx" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Aila">
        <meta name="keywords" content="HTML,CSS,JavaScript">
        <meta name="author" content="HiBootstrap">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>服务编排系统</title>
        <link rel="icon" th:href="@{assets/images/a4.jpg}" type="image/png" sizes="16x16">

        <!-- bootstrap css -->
        <link rel="stylesheet" th:href="@{assets/css/bootstrap.min.css}" type="text/css" media="all" />
        <!-- animate css -->
        <link rel="stylesheet" th:href="@{assets/css/animate.min.css}" type="text/css" media="all" />
        <!-- owl carousel css -->
        <link rel="stylesheet" th:href="@{assets/css/owl.carousel.min.css}" type="text/css" media="all" />
        <link rel="stylesheet" th:href="@{assets/css/owl.theme.default.min.css}" type="text/css" media="all" />
        <!-- meanmenu css -->
        <link rel="stylesheet" th:href="@{assets/css/meanmenu.min.css}" type="text/css" media="all" />
        <!-- magnific popup css -->
        <link rel="stylesheet" th:href="@{assets/css/magnific-popup.min.css}" type="text/css" media="all" />
        <!-- boxicons css -->
        <link rel='stylesheet' th:href='@{assets/css/boxicons.min.css}' type="text/css" media="all" />
        <!-- Line Awesome CSS -->
        <link rel='stylesheet' th:href='@{assets/css/line-awesome.min.css}' type="text/css" media="all" />
        <!-- flaticon css -->
        <link rel='stylesheet' th:href='@{assets/css/flaticon.css}' type="text/css" media="all" />
        <!-- style css -->
        <link rel="stylesheet" th:href="@{assets/css/style.css}" type="text/css" media="all" />
        <!-- responsive css -->
        <link rel="stylesheet" th:href="@{assets/css/responsive.css}" type="text/css" media="all" />
        <!--[if IE]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <div th:replace="~{common/common::topbar}"></div>
        <!-- service-section -->
        <section class="home-service-section p-tb-100">
            <div class="container">
                <div class="section-title">
                    <h2>让银行成为一种随时可得的服务</h2>
                </div>

                <div class="home-service-content service-page-grid">
                    <div class="row">
                        <div class="col-sm-12 col-md-6 col-lg-4" th:each="product : ${products}">
                            <div class="home-service-item fluid-height">
                                <div class="home-service-details full-height">
                                    <div class="home-service-image">
                                        <img th:src="@{assets/images/service1.png}" alt="service">
                                    </div>
                                    <div class="home-service-text">
                                        <h3>三湘理财</h3>
                                        <p th:text="${product.getProductName()}"></p>
                                    </div>
                                    <a th:href="@{/toShowProduct}+${product.getId()}">详细信息</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="pagination">
                        <ul class="pagination-list">
                            <li class="pagi-arrow disable"><a href="#"><i class='bx bx-chevrons-left'></i></a></li>
                            <li class="pagi-arrow disable"><a href="#"><i class='bx bx-chevron-left' ></i></a></li>
                            <li class="active"><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">...</a></li>
                            <li><a href="#">10</a></li>
                            <li class="pagi-arrow"><a href="#"><i class='bx bx-chevron-right'></i></a></li>
                            <li class="pagi-arrow"><a href="#"><i class='bx bx-chevrons-right' ></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
        <!-- .end service-section -->

        <div th:replace="~{common/common::footer}"></div>

        <!-- essential js -->
        <script th:src="@{assets/js/jquery-3.5.1.min.js}"></script>
        <script th:src="@{assets/js/popper.min.js}"></script>
        <script th:src="@{assets/js/bootstrap.min.js}"></script>
        <script th:src="@{assets/js/jquery.magnific-popup.min.js}"></script>
        <script th:src="@{assets/js/owl.carousel.min.js}"></script>
        <script th:src="@{assets/js/jquery.ajaxchimp.min.js}"></script>
        <script th:src="@{assets/js/form-validator.min.js}"></script>
        <script th:src="@{assets/js/contact-form-script.js}"></script>
        <script th:src="@{assets/js/jquery.meanmenu.min.js}"></script>
        <script th:src="@{assets/js/jquery.waypoints.js}"></script>
        <script th:src="@{assets/js/counter-up.js}"></script>
        <script th:src="@{assets/js/script.js}"></script>
    </body>
</html>
